<template>
  <div class="item">
    <label for :style="'width: ' + labelWidth  + ';'">{{labelName}}</label>
    <div class="inline-block" style="height: 38px;">
      <el-select
        v-model="formData.regionId"
        placeholder="大区"
        size="small"
        @change="handleRegionChange"
        style="width: 100px;"
      >
        <el-option
          v-for="item in regionOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>

      <el-select
        v-model="formData.provinceId"
        @change="handleProvinceChange"
        placeholder="省"
        size="small"
        style="width: 100px;"
      >
        <el-option
          v-for="item in provinceOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>

      <el-select
        v-model="formData.cityId"
        placeholder="市"
        size="small"
        @change="handleCityChange"
        style="width: 100px;"
      >
        <el-option
          v-for="item in cityOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="formData.areaId" size="small" style="width: 100px;" placeholder="区">
        <el-option
          v-for="item in areaOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          @change="handleRegionChange"
        ></el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import common from "@/utils/tools"; //工具函数
import API from "@/utils/api_config.js"; //引入api

export default {
  components: {},
  props: {
    labelName: {
      type: String
    },
    labelWidth: {
      type: String
    },
  },
  data() {
    return {
      formData: {
        regionId: "", //大区
        provinceId: "", //省份
        cityId: "",
        areaId: "", //区 县
        regionName: "",
        provinceName: "",
        cityName: "",
        areaName: "",
      },
      //地区
      regionOptions: [],
      provinceOptions: [], //用于获取省市联动的列表
      cityOptions: [],
      areaOptions: [], //区域
      //地址名展示
      regionShow: {},
      provinceShow: {},
      cityShow: {},
      areaShow: {},
      BingGun_request: "", //冰棍函数方法
      allMethods: {}, //方法集合
    };
  },
  mounted() {
    this.initRequest(); //初始化
    this.allMethods = this.getAllMethods();
    this.getAddress(); //大区 省 联动
    this.getProvince(); //获取所有省份
  },
  watch: {
    "formData.regionId"() {
      this.$emit('addressChange', {
        regionId: this.formData.regionId,
        provinceId: this.formData.provinceId,
        cityId: this.formData.cityId,
        areaId: this.formData.areaId, 
      });
    },
    "formData.provinceId"() {
      this.$emit('addressChange', {
        regionId: this.formData.regionId,
        provinceId: this.formData.provinceId,
        cityId: this.formData.cityId,
        areaId: this.formData.areaId, 
      });
    },
    "formData.cityId"() {
      this.$emit('addressChange', {
        regionId: this.formData.regionId,
        provinceId: this.formData.provinceId,
        cityId: this.formData.cityId,
        areaId: this.formData.areaId, 
      });
    },
    "formData.areaId"() {
      this.$emit('addressChange', {
        regionId: this.formData.regionId,
        provinceId: this.formData.provinceId,
        cityId: this.formData.cityId,
        areaId: this.formData.areaId, 
      });
    },
  },
  methods: {
     initRequest() {
      //初始化
      this.BingGun_request = common.BingGun_request({
        this: this,
        pageUrl: "",
        searchUrl: "",
        searchData: {},
      });
    },
    //地址
    getAddress() {
      let url = API.common.address_area; //大区
      console.log(url);
      const param = {};
      console.log("参数", param);
      common.get(
        url,
        param,
        null,
        (res) => {
          console.log("获取大区", res);
          this.regionData = res.data;
          res.data.forEach((item, index) => {
            this.regionOptions.push({
              value: item.id,
              label: item.name,
            });
          });
        },
        (err) => {
          console.log(err);
        }
      );
      let urlP = API.common.address_province; //省份
      console.log(urlP);
      const paramP = {};
      console.log("参数省份", paramP);
      common.get(
        urlP,
        paramP,
        null,
        (res) => {
          console.log("获取省份", res);
          this.allProvinceData = res.data;
          var newOptions = [];
          this.allProvinceData.forEach((item, index) => {
            newOptions.push({
              value: item.id,
              label: item.name,
            });
            this.provinceOptions = newOptions;
          });
        },
        (err) => {
          console.log(err);
        }
      );
    },

    //大区选择
    handleRegionChange() {
      var regionId = this.formData.regionId;
      var newOptions = [];
      this.allProvinceData.forEach((item, index) => {
        if (item.parentId == regionId) {
          newOptions.push({
            value: item.id,
            label: item.name,
          });
        }
      });
      this.provinceOptions = newOptions;
    },

    //地址 //省份
    getProvince() {
      this.BingGun_request.getProvince({
        url: API.common.address_province,
        tThis: this,
      });
    },

    //大区选择

    //省份联动1
    handleProvinceChange(val) {
      this.BingGun_request.handleProvinceChange({
        url: API.common.address_change,
        tThis: this,
        provinceIdName: "provinceId",
        cityOptsName: "cityOptions",
        cityIdName: "cityId",
      });
    },

    //城市管理联动1
    handleCityChange() {
      this.BingGun_request.handleCityChange({
        url: API.common.address_change,
        tThis: this,
        cityIdName: "cityId",
        regionOptsName: "areaOptions",
        regionIdName: "areaId",
      });
    },

    /* 方法抽离集合 */
    getAllMethods() {
      var _this = this;
      return {
        getAddressName(opt) {
          var provinceId = opt.provinceId,
            regionId = opt.regionId,
            cityId = opt.cityId,
            areaId = opt.areaId,
            regionOpts = opt.regionOpts,
            provinceOpts = opt.provinceOpts,
            cityOpts = opt.cityOpts,
            areaOpts = opt.areaOpts;
          var data = {};
          for (var i = 0; i < regionOpts.length; i++) {
            var item = regionOpts[i];
            if (item.value == regionId) {
              data.regionName = item.label;
            }
          }
          for (var i = 0; i < provinceOpts.length; i++) {
            var item = provinceOpts[i];
            if (item.value == provinceId) {
              data.provinceName = item.label;
            }
          }
          for (var i = 0; i < cityOpts.length; i++) {
            var item = cityOpts[i];
            if (item.value == cityId) {
              data.cityName = item.label;
            }
          }
          for (var i = 0; i < areaOpts.length; i++) {
            var item = areaOpts[i];
            if (item.value == areaId) {
              data.areaName = item.label;
            }
          }
          return data;
        },
      };
    },
  },
};
</script>

<style lang="scss" scoped>
// @import '~styles/mixins.scss';
// @import '~styles/variables.scss';
.item {
  display: inline-block;
  margin-left: 20px;
  margin-bottom: 4px;
  label {
    display: inline-block;
    min-width: 60px;
    font-size: 14px;
    color: #263238;
    text-align: center;
  }
  .inline-block {
    display: inline-block;
    margin-left: 10px;
  }

  .input {
    width: 160px;
  }
}

</style>